<template>
  <div class="hello">
      <div class="container">
        <div class="row">
      <div id="text-center col-xs-12">
          <div id="about_me">
              <p id="title">Contact<span>Me</span></p>
              <p id="two_txt"><span style="color:#e3723c; ">灵感</span><span style="color: #84c800"> 代码</span><span style="color: #63B8FF"> 梦想</span><span style="color: deeppink"> 未来</span></p>

          </div>
      </div>
  </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .hello{
   margin: 2rem 0 0 0 
 } 
#title{
  font-family: "Space Mono", Arial, serif;  
    font-size: 5rem;
    color: #63B8FF;
    text-align: center;
    font-weight: 700;
    border-bottom: 2px #63B8FF solid;
}
#title span{
    color: black;
}
#two_txt{
    margin-top: 10px;
    text-align: center;
    font-size: 2rem;
}

</style>
